<template>
  <view class="wrap">
    <status-bar></status-bar>
    <view class="editBg"></view>
    <view class="header">
      <view class="title">编辑资料</view>
      <view class="cancel" @click="back">
        <uv-icon name="arrow-left" size='40rpx' color="#FFF" bold></uv-icon>
      </view>
    </view>
    <view class="box">
      <view class="group-avatar" @click="chooseImage">
        <image :src="setUrl(body.logo_image)" class="img"></image>
      </view>
      <view class="base">
        <view class="font">社群名称</view>
        <view class="list">
          <uv-cell-group :border="false">
            <uv-cell :title="body.name" value='' url='/pages/group/setting/edit-name' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF'></uv-cell>
          </uv-cell-group>
        </view>
        <view class="font">社群类型</view>
        <view class="list noBorder">
          <uv-cell-group :border="false">
            <uv-cell :title="`${payType[body.type]}  |  ${body.coin}元${body.pay_expiration != 0 ? ('/' + payTime[body.pay_expiration]) : ''}`" value='' url='' center :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF'></uv-cell>
          </uv-cell-group>
        </view>
      </view>
    </view>
    <view class="box mt20">
      <view class="base">
        <view class="font">社群介绍</view>
        <view class="list noBorder" v-if="body.desc">
          <uv-cell-group :border="false">
            <uv-cell :title="body.desc" value='' url='/pages/group/setting/edit-test' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF'></uv-cell>
          </uv-cell-group>
        </view>
        <view class="list noBorder line" v-else>
          <uv-cell-group :border="false">
            <uv-cell title="优秀的介绍，有助于吸引其他人加入" value='' url='/pages/group/setting/edit-test' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #B8B8B8;' cellStyle='background-color: #FFF'></uv-cell>
          </uv-cell-group>
        </view>
      </view>
    </view>
    <view class="box mt20">
      <view class="base" @click="high">
        <view class="font">社群亮点</view>
        <view class="list noBorder">
          <template v-if="body.poster_images">
            <uv-scroll-list :indicator="false">
              <view class="scrollItem" v-for="(item, index) in body.poster_images.split(',')" :key="index">
                <image :src="setUrl(item)" class="img"></image>
              </view>
            </uv-scroll-list>
          </template>
          <template v-else>
            <uv-cell-group :border="false">
              <uv-cell title="付费页展示的海报，可提升付费率" value='' center isLink url="/pages/group/setting/edit-upload" :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #B8B8B8;' cellStyle='background-color: #FFF'></uv-cell>
            </uv-cell-group>
          </template>
        </view>
      </view>
    </view>
    <!-- <view class="box mt20">
      <view class="base">
        <view class="font">成员介绍</view>
        <view class="people noBorder">
          <view class="item" v-for="(item,index) in 3" :key='index'>
            <avatar src='../../../static/logo.png' style="width: 120rpx; height: 120rpx;"></avatar>
            <view class="center">
              <view class="title">进击的沈帅波 <text class="tag" :class="{red: index == 0, yellow: index == 1, blue: index == 2}">{{peopleType[index]}}</text></view>
              <view class="desc">以幽默风骚的口吻解构防骗、创业、婚家庭男女情感问题等，你会觉得他说的好有道理，但以幽默风骚的口吻解构防骗、创业、婚家庭男女情感问题等，你会觉得他说的好有道理，但…</view>
            </view>
            <view class="right">
              <uv-icon name="arrow-right" size='30rpx' color="#B8B8B8"></uv-icon>
            </view>
          </view>
        </view>
      </view>
    </view> -->
    <view style="width: 100%; height: 20rpx;"></view>
    <uv-safe-bottom></uv-safe-bottom>
    
    <action ref="actionPhoto" @click="getImageUrl"></action>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useOrder } from '@/store';
import { setUrl, choose, editGroup, getGroup, toast } from '@/common';

const actionPhoto = ref(null);
const peopleType = ['群主', '合伙人', '嘉宾'];
const payTime = { 1: '月度', 2: '季度', 3: '半年度', 4: '年度' };
const payType = { 1: '免费社群', 2: '收费社群' };

let body = computed(() => {
  const store = useOrder();
  return uni.$uv.deepClone(store.group);
});

function xiuGroup(){
  const { id } = body.value;
  const params = {
    id,
    logo_image: body.value.logo_image
  }
  editGroup(params).then(res => {
    if(res.code == 1){
      toast('修改成功', true);
      getGroup(id);
    }
  })
}
async function chooseImage(){
  
  actionPhoto.value.open();
}
function getImageUrl(url){
  body.value.logo_image = url;
  xiuGroup()
}
function back(){
  uni.navigateBack({
    delta: 1
  });
}
function high(){
  uni.navigateTo({
    url: '/pages/group/setting/edit-upload'
  });
}
</script>

<style lang="scss" scoped>
  .box{
    background-color: #fff;
    /* #ifdef APP-PLUS || MP-WEIXIN */
    margin-top: 80rpx;
    /* #endif */
    
    /* #ifdef H5 */
    margin-top: 160rpx;
    /* #endif */
    
    &.mt20{
      margin-top: 20rpx;
    }
    .base{
      padding: 0 40rpx;
      .people{
        padding-top: 40rpx;
        .item{
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 50rpx;
          .center{
            padding-left: 20rpx;
            padding-right: 20rpx;
            flex: 1;
            width: 0;
            .title{
              font-weight: 500;
              font-size: 32rpx;
              color: #2B2B2B;
              padding-bottom: 8rpx;
              .tag{
                height: 32rpx;
                line-height: 32rpx;
                border-radius: 32rpx;
                padding: 0 12rpx;
                color: #FFFFFF;
                font-weight: 400;
                font-size: 20rpx;
                margin-left: 8rpx;
                &.red{
                  background-color: #E43222;
                }
                &.yellow{
                  background-color: #F0BA16;
                }
                &.blue{
                  background-color: #465B89;
                }
              }
            }
            .desc{
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
              display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
              -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
              -webkit-line-clamp: 2; // 显示两行
              overflow: hidden;
            }
          }
          .right{
            
          }
        }
      }
      .list{
        padding: 20rpx 0;
        border-bottom: 1px solid #EFEFEF;
        &.noBorder{
          border-bottom: 0;
        }
        &.line{
          :deep(.uv-cell-group){
            .uv-cell__body__content{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 0;
              .uv-cell__title-text, .uv-cell__title{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
        :deep(.uv-cell-group){
          .uv-cell__body.uv-cell--center{
            padding: 20rpx 0;
            .uv-cell__left-icon-wrap{
              display: none;
            }
          }
        }
        .scrollItem{
          margin-right: 20rpx;
          .img{
            width: 150rpx;
            height: 150rpx;
            border-radius: 12rpx;
            overflow: hidden;
          }
          &:last-child{
            margin-right: 0;
          }
        }
      }
      .font{
        padding-top: 40rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #2B2B2B;
      }
    }
    .group-avatar{
      width: 256rpx;
      height: 256rpx;
      border-radius: 12rpx;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      overflow: hidden;
      border: 1px solid rgba($color: #FFF, $alpha: .8);
    }
  }
  .header{
    position: relative;
    .cancel{
      position: absolute;
      left: 30rpx;
      top: 26rpx;
    }
    .title{
      font-weight: 500;
      font-size: 36rpx;
      color: #FFFFFF;
      text-align: center;
      padding-top: 20rpx;
    }
  }
  .editBg{
    background-image: url();
    background-repeat: no-repeat;
    background-size: 100%;
    width: 750rpx;
    height: 360rpx;
    position: absolute;
    left: 0;
    top: 0;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>